<template>
  <div>
    <div class="login-wrap">
      <div class="logo-img">
        <img src="/static/img/logo_btn.png" alt="" />
        <h3>乐慧城市·日日省</h3>
      </div>
      <div class="login-text">
        <h3>乐慧城市·日日省申请获取以下权限:</h3>
        <p>
          · 获取您的公开信息 (昵称、头像等)
        </p>
      </div>
      <div class="login-btn">
        <button class="grayBg" @click="$router.back(-1)">拒绝
        </button
        >
        <button class="activeBg" @click="getCode">允许</button>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
import store from "@/store/store.js";
import {getCode} from "@/api/login";
import Router from "@/router/index.js";

export default {
  name: "Index",
  data() {
    return {
      code: '',
    };
  },
  created() {
    //var vConsole = new VConsole();
  },
  mounted() {

    // 监测是否是微信回调
    if (this.getUrlCode().code) {
      this.getCode();
    }
  },
  methods: {
    getCode() {
      // 非静默授权，第一次有弹框
      this.code = "";
      var local = window.location.href; // 获取页面url
      var appid = "wx9b4743a1848616d3";
      this.code = this.getUrlCode().code; // 截取code
      if (this.code == null || this.code === "") {
        // 如果没有code，则去请求
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
        return false;
      } else {
        // 你自己的业务逻辑
        let postData = {code: this.code, fid: 0}
        Axios.post("/api/Mp/Login", postData).then(res => {
          console.log(JSON.stringify(res.data));
          if (res.data.errCode == 0) {
            if(res.data.data.isRegist == false){
              window.localStorage.setItem("code", this.code);
              window.localStorage.setItem("openId", res.data.data.openId);
              Router.push({ path: "/register" });
            }else{
              store.commit("changeUserinfo", res.data.data);
              let token = res.data.data.token.access_token;
              let access_token = "Bearer " + token;
              Axios.defaults.headers.common["Authorization"] = access_token;
              window.localStorage.setItem("token", token);
              window.localStorage.setItem("userinfo", JSON.stringify(res.data.data));
              window.localStorage.setItem("nickName", res.data.data.nickName);
              window.localStorage.setItem("avatarUrl", res.data.data.avatarUrl);
              Router.push({ path: "/my" });
            }
          }
        });
      }
    },
    getUrlCode() {
      // 截取url中的code方法
      var url = location.search;
      this.winUrl = url;
      var theRequest = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
        }
      }
      return theRequest;
    }
  }
  // methods: {
  //   allowFn(){
  //     getCode();
  //   }
  // }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login-wrap {
  font-size: 0.28rem;
  padding: 0.5rem 1.5rem;
  letter-spacing: 0.05rem;
}
.login-wrap .logo-img,
.login-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.login-wrap .logo-img,
.login-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.login-wrap .logo-img {
  width: 100%;
  padding: 1rem 0;
  border-bottom: 1px solid #ededed;
}
.login-wrap .logo-img img {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
}
.login-wrap .logo-img h3 {
  font-size: 0.42rem;
  font-weight: 700;
  margin-top: 0.5rem;
}
.login-wrap .login-text {
  width: 100%;
  padding: 1.2rem 0 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.login-wrap .login-text h3 {
  font-weight: 700;
  color: #333;
  padding: 0 0 0.5rem;
  font-size: 0.42rem;
}
.login-wrap .login-text p {
  line-height: 160%;
  color: #999;
  font-size: 0.38rem;
}
.login-wrap .login-btn {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.login-wrap button {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 0.2rem;
  height: 1.2rem;
  border-radius: 0.6rem;
  border: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: 0.02rem;
  font-size: 0.42rem;
}
.login-wrap button.grayBg {
  background-color: #ccc;
  color: #666;
  margin-right: 0.2rem;
}
.login-wrap button {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 0.2rem;
  height: 1.2rem;
  border-radius: 0.6rem;
  border: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: 0.02rem;
  font-size: 0.42rem;
}
.login-wrap button.activeBg {
  background-color: #0085ff;
  color: #fff;
  margin-left: 0.2rem;
}
</style>
